<template>
  <div class="flex alignCenter" v-show="display">
      <CommonIp v-model="ip1" @change.native="commonIpsChange"></CommonIp>
      <span>{{separation}}</span>
      <CommonIp v-model="ip2" @change.native="commonIpsChange"></CommonIp>
  </div>
</template>
<script>
import CommonIp from './CommonIp'
export default {
  name: "commonIps",
  components:{CommonIp},
  model:{
    prop:"value",
    event:"IpsChange",
  },
  props:{
    disabled:{
      type:Boolean,
      default: false
    },
    //inputSize  根element是size一样  有三种选择  mini small medium
    separation:{
      type:String,
      default:"-"
    },
    //当前默认传递过来的值
    value:String,
    readonly:{
      type:Boolean,
      default:false
    },
    display: {
      type:Boolean,
      default: true
    },
  },
    watch: {
        value:{
            handler(val){
                if (val){
                    let values = val.split(this.separation);
                    if (values.length > 1){
                        this.ip1 = values[0];
                        this.ip2 = values[1];
                    }else {
                        this.ip1 = values[0];
                        this.ip2 = '';
                    }
                }else {
                    this.ip1 = '';
                    this.ip2 = '';
                }
            },
            immediate: true,  //刷新加载 立马触发一次handler
            deep: true  // 可以深度检测到 obj 对象的属性值的变化
        },
    },
  data() {
    return {
      ip1:'',
      ip2:''
    }
  },
  methods:{
    commonIpsChange(){
      let val=this.ip1+','+this.ip2;
      this.$emit('IpsChange', val);
    }
  }
}
</script>
